<template>
    <div class="infinite-list portal" :infinite-scroll-disabled="disabled" v-infinite-scroll="load" infinite-scroll-immediate="true" infinite-scroll-distance="400" style="overflow:auto;height:100%">
        <common-header @handSearch="handSearch" />
        <div class="categoryCms">
            <div class="w">
                <common-category />
                <main-rotation-chart :params="params" v-if="isShowCms" />
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowCms" :rows="13" animated />
            </div>
            <div class="w maisha">
                <common-miao-sha :params="params" v-if="isShowCms" />
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowCms" :rows="13" animated />
            </div>
            <div>
                <common-gobal-nice-goods :params="params" v-if="isShowCms" />
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowCms" :rows="13" animated />
            </div>
            <div class="w">
                <common-special-price :params="params" v-if="isShowCms" />
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowCms" :rows="13" animated />
            </div>
            <div class="w discoverNiceGoods">
                <common-discover-nice-goods :params="params" v-if="isShowCms" />
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowCms" :rows="13" animated />
            </div>
            <div class="w">
                <common-new-goods :params="params" v-if="isShowCms" />
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowCms" :rows="13" animated />
            </div>
            <div class="w">
                <common-channels :params="params" v-if="isShowCms" />
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowCms" :rows="13" animated />
            </div>
            <div class="w">
                <div class="recommondsMain">
                    <div class="goodList">
                        <ul>
                            <li class="infinite-list-item" :key="dataArray.id" v-for="dataArray in arrayGoodsData">
                                <div :key="item.id" class="goodItem" v-for="(item) in dataArray" @click="goToDetial(item)">
                                    <img style="margin-left: auto;margin-right:auto;display: flex;margin-top: 30px" width="150px" height="150px" :src="item.skus[0].images.split(',')[0]" />
                                    <div class="title">{{item.title}}</div>
                                    <div class="mainPrice">
                                        <i class="mod_price_i">¥</i>
                                        <span class="mod_price">{{item.skus[0].price}}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="recommondsData.length<250&&isShowGoodsLoading" :rows="3" animated />
                    </div>
                </div>
            </div>
        </div>
        <div>
            <common-footer :params="params" v-if="isShowCms" />
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import Header from './header/index.vue'
    import Category from "./category/index.vue";
    import RotationChart from "./rotation-chart/index.vue";
    import MiaoSha from "./miao-sha/index.vue";
    import GobalNiceGoods from "./gobal-nice-goods/index.vue";
    import SpecialPrice from "./special-price/index.vue";
    import DiscoverNiceGoods from "./discover-nice-goods/index.vue";
    import NewGoods from "./new-goods/index.vue";
    import Channels from "./channels/index.vue";
    import Footer from "./footer/index.vue";
    import CustomerApiActions from '@/components/api/customer-api-actions';
    import _ from "lodash";

    @Component({
        components: {
            MainRotationChart: RotationChart,
            CommonCategory: Category,
            CommonHeader: Header,
            CommonMiaoSha: MiaoSha,
            CommonGobalNiceGoods: GobalNiceGoods,
            CommonSpecialPrice: SpecialPrice,
            CommonDiscoverNiceGoods: DiscoverNiceGoods,
            CommonNewGoods: NewGoods,
            CommonChannels: Channels,
            CommonFooter: Footer
        }
    })
    export default class ProductIndex extends Vue {
        public isShowCms: any = false;
        public params: any = {};
        public recommondsData = new Array < any > ();
        public arrayGoodsData = new Array < any > ();
        public loading: boolean = false;
        public currentPage = 1;
        public isShowImage = true;
        public i = 0;
        public currentPageGoods = new Array < any > ();
        public canRun = true;
        public isShowGoodsLoading = true;
        public searchText = "";
        public async created() {
            let apiActions = new CustomerApiActions(this);
            let result = await apiActions.getCmsContent({});
            this.params = result.data;
            this.isShowCms = true;
            this.params.isShowCms = true;
        }
        public loadImage(target: any) {

        }
        mounted() {
            document.addEventListener('scroll', this.getGoods);
        }
        public getArrayGoodsData() {
            let data: Array < any >= new Array < any > ();
            this.arrayGoodsData = new Array < any > ();
            let tempRecData: Array < any >= _.cloneDeep(this.recommondsData);
            for (let i = 0; i < tempRecData.length / 5; i++) {
                let rowData: Array < any >= tempRecData.slice(i * 5, (i + 1) * 5);
                data.push(rowData);
            }
            this.arrayGoodsData = data;
        }
        public load() {
            if (!this.canRun) {
                return;
            }
            this.canRun = false;
            setTimeout(async () => {
                await this.getGoods();
            }, 50);
        }

        public async getGoods() {
            this.loading = true;
            let apiActions = new CustomerApiActions(this);
            let result: any = null;
            if ((this.currentPageGoods && this.currentPageGoods.length > 0) || this.currentPage == 1) {
                let data: any = await apiActions.getSpuListPage({ title: "", pager: { pageSize: 15, currentPage: this.currentPage++ } });
                result = _.cloneDeep(data);
            }
            if (result && result.data && result.data.rows && result.data.rows.length > 0) {
                let data: Array < any >= result.data.rows;
                data.forEach(item => {
                    let curData: any = this.recommondsData.find(curItem => curItem && curItem.id == item.id);
                    if (!curData) {
                        this.recommondsData.push(item);
                    }
                });
                this.currentPageGoods = result.data.rows;
                this.getArrayGoodsData();
            } else {
                this.isShowGoodsLoading = false;
                this.currentPageGoods = null;
            }
            this.canRun = true;
            this.loading = false;
        }
        public get disabled() {
            return this.recommondsData.length > 250
        }
        public goToDetial(item: any) {
            let routeOne = this.$router.resolve({
                name: "detial",
                query: {
                    id: item.id
                }
            });
            window.open(routeOne.href, '_blank');
        }
        public handSearch(searchText: any) {
            window.open(`/#/search?searchText=${searchText}`);
        }
    }
</script>
<style type="text/css" lang="less">
    body {
        font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        color: #666;
        overflow: hidden;
        background-color: #f4f4f4;
    }

    .portal {
        margin-bottom: 20px;
        width: 100%;

        .categoryCms {
            margin-top: 3px;
            background: url("//img10.360buyimg.com/babel/jfs/t1/179214/17/4974/86871/60a4d856E263cbf89/5580001e18881b2d.png.webp") 50% 0px no-repeat;

            .w {
                width: 1190px;
                margin: auto;
                display: flex;
                flex-direction: row;

                .recommondsMain {
                    width: 100%;
                    display: flex;

                    .goodList {
                        flex-direction: row;
                        flex-wrap: wrap;
                        width: 100%;
                        display: flex;
                        justify-content: space-between;

                        ul {
                            display: flex;
                            flex-direction: column;
                            margin: 0px;
                            padding: 0px;

                            li {
                                list-style-type: none;
                                display: flex;
                                margin: 0px;
                                padding: 0px;
                            }
                        }

                        .goodItem {
                            width: 230px;
                            height: 322px;
                            background: white;
                            margin-left: 5px;
                            cursor: pointer;
                            margin-top: 10px;

                            .title {
                                height: 48px;
                                width: 190px;
                                margin-left: auto;
                                margin-right: auto;
                                font-size: 14px;
                                line-height: 24px;
                                text-align: left;
                                color: #666;
                                -webkit-transition: color .2s ease;
                                transition: color .2s ease;
                                word-break: break-all;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                margin-top: 40px;
                            }

                            .mainPrice {
                                width: 190px;
                                margin-left: auto;
                                margin-right: auto;
                                margin-top: 15px;

                                .mod_price {
                                    display: inline-block;
                                    line-height: 18px;
                                    height: 18px;
                                    color: #e1251b;
                                    font-size: 20px;
                                    font-weight: 700;
                                    font-family: arial, sans-serif;
                                }

                                .mod_price_i {
                                    vertical-align: middle;
                                    font-size: 12px;
                                    font-weight: 700;
                                    font-family: MicrosoftYahei-regular, Arial, Helvetica, sans-serif;
                                    color: #e1251b;
                                    font-style: normal;
                                }
                            }

                        }
                    }
                }
            }

            .maisha {
                margin-top: 23px;
            }

            .discoverNiceGoods {
                margin-top: 8px;
            }
        }
    }

    #app {
        font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        color: #666 !important;
    }
</style>